<template>
  <div class="menu">
    <div class="menu-head" :style="activeStyle" @click="expand" @mouseenter="showOperate" @mouseleave="showOperate">
      <div>
        <img class="expand" src="../assets/down-arrow.png" v-show="isExpand">
        <img class="expand" src="../assets/right-arrow.png" v-show="!isExpand">
        {{ props.data.label }}
      </div>
      <template v-if="props.data.opt">
        <div v-show="isShowOperate">
          <div v-for="item in props.data.opt" :class="['operate', item.icon]" :title="item.label" :key="item.key" @click.stop="addItem(item)" />
        </div>
      </template>
    </div>
    <div v-show="isExpand && props.data.expandContainer" class="menu-container scroll">
      <component :is="props.data.expandContainer" data="ddddd444" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from "vue";
import {MenuOptType, MenuType} from "../util/types.d.ts";

const emit = defineEmits(['select', 'click-opt']);
const props = defineProps({
  data: {
    type: Object as () => MenuType,
    default: () => {}
  },
  currentMenu: {
    String,
    default: ''
  }
});
const activeStyle = computed(() => {
  return {
    background: isExpand.value ? 'rgb(218,235,253)' : ''
  }
});

let isExpand = ref(false);
let isShowOperate = ref(false);

function expand() {
  emit('select', props.data.key);
  isExpand.value = !isExpand.value;
}

function showOperate() {
  isShowOperate.value = !isShowOperate.value;
}

function addItem(data: MenuOptType) {
  emit('click-opt', {
    parent: props.data.key,
    data: data
  });
}
</script>

<style scoped>
</style>
